<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .search-info-style {
    margin: 10px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .modal-form-input {
    width: 80%;
    margin-left: 50px;
  }
</style>
<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="search-info-style">
      <Col span="6">
        <span style="text-al">标题：</span>
        <Input style="width: 70%;" v-model="searchInfo.title" />
      </Col>
      <!-- <Col span="6">
        <span>身份证号：</span>
        <Input style="width: 70%;" v-model="searchInfo.cardno" />
      </Col> -->
      <Button class="new-btn-sty" @click="changePageNo(1)">
        <Icon type="ios-search" /> 搜索
      </Button>
      <Button class="new-btn-sty" @click="addNewData">
        <Icon type="md-add" /> 添加条件要素
      </Button>
    </Row>
    <Table border :columns="columns1" :data="datalist" >
      <template slot-scope="{ row, index }" slot="table-system">
        <span>{{dictData.systemDict[row.system]}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="table-status">
        <span>{{row.status == '1' ? '启用' : '停用'}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="table-frequencey">
        <span>{{dictData.frequenceyDict[ 'a' + row.frequencey]}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="table-btns">
        <div v-if="row.status == '0'">
          <span style="margin-right: 5px" >
            <Button type="info" size="small" @click="editInfo(row)">编辑</Button>
          </span>
          <span style="margin-right: 5px">
            <Button type="info" size="small" @click="setRuleStatus(row, '1')">启用</Button>
          </span>
          <span>
            <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
          </span>
        </div>
        <div v-else>
          <span style="margin-right: 5px">
            <Button type="info" size="small" @click="getRules(row)">规则列表</Button>
          </span>
          <span>
            <Button type="info" size="small" @click="setRuleStatus(row, '0')">停用</Button>
          </span>
        </div>
      </template>
    </Table>
    <Row v-if="loadData">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total/>

    <Modal v-model="modalData.show" title="条件要素信息" width="800">
      <Form label-position="right" :label-width="120" ref="personInfo" :model="modalData.data"
            :rules="ruleInline">
        <FormItem label="标题：" prop="title" class="modal-form-input">
          <Input type="text" v-model="modalData.data.title"></Input>
        </FormItem>
        <FormItem label="委办局标识：" prop="system" class="modal-form-input">
          <Select v-model="modalData.data.system">
            <Option value="CJRBT">残疾人双补</Option>
          </Select>
        </FormItem>
        <FormItem label="使用频次：" prop="frequencey" class="modal-form-input">
          <Select v-model="modalData.data.frequencey">
            <Option value="1">一次性</Option>
            <Option value="2">每月一次</Option>
            <Option value="3">每年一次</Option>
          </Select>
        </FormItem>
        <FormItem label="描述：" class="modal-form-input">
          <Input type="textarea" v-model="modalData.data.describe"></Input>
        </FormItem>
        <FormItem label="备注：" class="modal-form-input">
          <Input type="textarea" v-model="modalData.data.remark"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" @click="saveData">确认</Button>
        <Button type="error" @click="modalData.show=false">关闭</Button>
      </div>
    </Modal>

    <Modal v-model="modalDataRules.show" title="规则列表" width="1000">
      <Table border :columns="columns2" :data="modalDataRules.data">
        <template slot-scope="{ row, index }" slot="table-rule-status">
          <span>{{row.status == '1' ? '是' : '否'}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="table-rules">
          <p>{{row.ruledata.desc}}</p>
          <p>{{row.ruledata.grade}}</p>
          <p>发放金额：{{row.ruledata.money}}元</p>
        </template>
      </Table>
      <Page class="page_style" :total="modalDataRules.totalnum" :current="modalDataRules.pageNo"
          :page-size="modalDataRules.pageSize" @on-change="changeRulePageNo" show-total/>
      <div slot="footer">
        <Button type="error" @click="modalDataRules.show=false">关闭</Button>
      </div>
    </Modal>

  </Card>
</template>
<script>
import { findRuleList, saveRule, deleteRule, findRuleSysList } from '@/api/capital'
export default {
  components: {},
  data () {
    return {
      loadData: true,
      searchInfo: {
        title: '',
        currentPageNo: 1,
        currentPageSize: 10
      },
      dictData: {
        systemDict: { CJRBT: '残疾人双补' },
        frequenceyDict: { 'a1': '一次性', 'a2': '每月一次', 'a3': '每年一次' }
      },
      columns1: [
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '标题', key: 'title', width: 180 },
        { title: '委办局标识', slot: 'table-system', width: 110, align: 'center' },
        { title: '状态', slot: 'table-status', width: 100, align: 'center' },
        { title: '使用频次', slot: 'table-frequencey', width: 100 },
        { title: '描述', key: 'describe', minWidth: 200 },
        { title: '操作', align: 'center', slot: 'table-btns', width: 200 }
      ],
      columns2: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '标题', key: 'title', width: 180 },
        { title: '是否最新', slot: 'table-rule-status', width: 100, align: 'center' },
        { title: '添加时间', key: 'create_time', width: 170, align: 'center' },
        { title: '内容', slot: 'table-rules' }
      ],
      datalist: [],
      ruleInline: {
        title: [
          { required: true, message: '请填写标题', trigger: 'blur' }
        ],
        system: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
        frequencey: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }
        ]
      },
      modalData: { show: false, data: {} },
      modalDataRules: { show: false, data: [], pageNo: 1, pageSize: 10 }
    }
  },
  methods: {
    // 查询订单列表接口
    init (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      findRuleList(param).then(res => {
        if (res.data.data) {
          this.datalist = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取人员列表失败', desc: res.data.errmsg })
        }
      })
    },
    // 搜索按钮 || 切换页码
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      let params = {
        title: this.searchInfo.title
      }
      this.init(params)
    },
    addNewData () {
      this.modalData.data = {}
      this.modalData.show = true
    },
    editInfo (obj) {
      this.modalData.data = {
        id: obj.id,
        title: obj.title,
        system: obj.system,
        frequencey: obj.frequencey,
        describe: obj.describe,
        remark: obj.remark
      }
      this.modalData.show = true
    },
    setRuleStatus (obj, status) {
      let msg = status === '1' ? '确认启用当前条件，获取发放信息？' : '停用后，不再继续获取发放条件？'
      this.$Modal.confirm({
        title: msg,
        onOk: () => {
          let param = {
            id: obj.id,
            status: status
          }
          saveRule(param).then(res => {
            if (res.data.data) {
              this.$Notice.success({ title: '成功', desc: '' })
              this.changePageNo(this.searchInfo.currentPageNo)
            } else {
              this.$Notice.error({ title: '失败', desc: res.data.errmsg })
            }
          })
        }
      })
    },
    saveData () {
      this.$refs.personInfo.validate((valid) => {
        if (valid) {
          saveRule(this.modalData.data).then(res => {
            if (res.data.data) {
              this.$Notice.success({ title: '成功', desc: '' })
              this.modalData.show = false
              this.changePageNo(1)
            } else {
              this.$Notice.error({ title: '失败', desc: res.data.errmsg })
            }
          })
        } else {
          this.$Notice.error({ title: '信息错误', desc: '请填写正确的人员信息' })
        }
      })
    },
    deleteRow (obj) {
      this.$Modal.confirm({
        title: '删除后信息将无法找回，确认删除吗？',
        onOk: () => {
          deleteRule(obj).then(res => {
            if (res.data.data) {
              this.$Notice.success({ title: '成功', desc: '' })
              this.changePageNo(this.searchInfo.currentPageNo)
            } else {
              this.$Notice.error({ title: '失败', desc: res.data.errmsg })
            }
          })
        }
      })
    },
    changeRulePageNo (pageNo) {
      let param = {
        rule_code: this.modalDataRules.rule_code,
        pageNo: pageNo,
        pageSize: this.modalDataRules.pageSize
      }
      findRuleSysList(param).then(res => {
        if (res.data.data) {
          this.modalDataRules.data = res.data.data.results
          this.modalDataRules.totalnum = res.data.data.totalRecord
          this.modalDataRules.data.forEach(function (item, index) {
            item.ruledata = JSON.parse(item.rule)
          })
          this.modalDataRules.show = true
        } else {
          this.$Notice.error({ title: '获取人员列表失败', desc: res.data.errmsg })
        }
      })
    },
    getRules (obj) {
      this.modalDataRules.rule_code = obj.rule_code
      this.modalDataRules.pageNo = 1
      this.changeRulePageNo(1)
    }
  },
  watch: {
    'modalData.show' (newValue, oldValue) {
      // 每次关闭人员信息框时重置表单校验
      if (!newValue) {
        this.$refs.personInfo.resetFields()
      }
    }
  },
  mounted () {
    this.init({})
  }
}
</script>
